<template>
<div >
  <div style="width: 100%">
  <mt-header style="position: fixed;width: 100%" :title="article.title">
    <router-link  to="/list" slot="left">
      <mt-button icon="back">返回</mt-button>
    </router-link>
    <mt-button   slot="right" @click="share" >写好了,发布</mt-button>
  </mt-header>
  </div>
  <div style="height: 45px;width: 100%"></div>
  <div >
    <mt-field :attr="{ maxlength: 15 }"  label="标题"  placeholder="输入您的故事标题" v-model="article.title">
    </mt-field>
    <!--<mt-field label="内容" placeholder="输入您的故事内容" rows="10" type="textarea" v-model="article.content">-->
    <!--</mt-field>-->
    <html5-editor v-model="article.content"></html5-editor>
    <mt-field label="文章价值" type="number"  placeholder="在此设定故事价值"    v-model="article.price">
    </mt-field>

  </div>
  <!--<mt-button   style="width: 100%;margin-top: 30px" @click="saveArticle" v-show="article.isPublic==0" type="primary" >暂存</mt-button>-->

</div>
</template>
<script>
  import {saveArticle,getArticle} from '../api/api';
  import {Indicator,Toast} from 'mint-ui';
  import Html5Editor from './common/Html5Editor'
  export default {
    components:{Html5Editor},
    created(){



    },
    mounted(){

      this.id=this.getQueryString('id');
      this.getArticle();
    },
    data(){
      return{
        id:'',
        loading:false,
        article:{
          title:'',
          price:1,
          isPublic:0,
          type:'article'

        },
        content:''
      }
    },methods:{
      updateData(e){

      },
      getArticle(){
        let openid=sessionStorage.getItem('openid');
        if(!!this.id){
          getArticle({article:this.id,openid:openid}).then((res)=>{

            this.article=res.data.data;
          });
        }

      },
      share(){

        this.afterShare();
      },
      afterShare(){
        let vm=this;

        this.article.isPublic=1;
        let openid=sessionStorage.getItem('openid');
        this.article.openid=openid;
        if(!openid){
          Toast('检测到未登录,请刷新页面再试试');
          return ;
        }
        if(!this.article.title){
          Toast('请输入标题');
          return ;
        }
        if(!this.article.content){
          Toast('请输入内容');
          return ;
        }
        if(!this.article.price){
          Toast('请输入文章价值');
          return ;
        }
        Indicator.open({
          text:'正在发布',
          spinnerType:'fading-circle'
        });
        saveArticle(this.article).then((res)=>{
          Indicator.close();
          if(res.data.result){
            Toast({
              position:'bottom',
              message:'发布成功!'
            });
            vm.article=res.data.data;
            vm.$router.push('/page?id='+vm.article.id)

          }
        });
      },
      getQueryString(name)
      {
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if(r!=null)return  unescape(r[2]); return null;
      },
      saveArticle(){
        let vm=this;
        let openid=sessionStorage.getItem('openid');
        if(!openid){
          Toast('检测到未登录,请刷新页面再试试');
          return ;
        }
        if(!this.article.title){
          Toast('请输入标题');
          return ;
        }
        if(!this.article.content){
          Toast('请输入内容');
          return ;
        }
        if(!this.article.price){
          Toast('请输入文章价值');
          return ;
        }


        Indicator.open({
          text:'正在保存',
          spinnerType:'fading-circle'
        });
        saveArticle(this.article).then((res)=>{
          Indicator.close();
          if(res.data.result){
            Toast({
              position:'bottom',
              message:'保存成功!'
            });
            vm.article=res.data.data;
          }
        });
      }
    },watch:{
      '$store.state.dataChanged'(r1,r2){

         }
    }
  }

  </script>
